<template>
    <button class="f-button" @click="click($attrs.onClick)" :class="{
        'is-disabled': disabled,
        'is-plain': plain,
        'is-round': round
    }">
        <slot></slot>
    </button>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue';
import InitStyle from "./InitStyle"

const props = defineProps<{
    /** 按钮类型 */
    type?: "primary" | "success" | "info" | "warning" | "danger"
    /** 是否为朴素按钮 */
    plain?: boolean,
    /** 是否圆角 */
    round?: boolean,
    /** 是否禁用 */
    disabled?: boolean
}>()

// 禁用 Attributes 继承（父级挂载属性方法会自动挂载到根节点）
defineOptions({
    inheritAttrs: false
})

const { _no_plain, _plain, _disabled } = InitStyle(props)

/** 高亮样式 */
enum INDEX {
    "undefined" = 0,
    "primary" = 1,
    "success" = 2,
    "info" = 3,
    "warning" = 4,
    "danger" = 5
}

// 根据类型获取索引
const index = computed(() => {
    return INDEX[props.type as keyof typeof INDEX]
})

/** button 默认样式 */
const _default_styles = reactive({
    // 默认
    default: {
        color: "",
        bgColor: "",
        borderColor: ""
    },
    // 鼠标 hover
    hover: {
        color: "",
        bgColor: "",
        borderColor: ""
    }
})

// 获取设置样式
function GetColorConfig() {
    // 样式数据
    let styleObj = _no_plain

    /* 默认 */
    let _default = {
        color: styleObj.color.default[index.value],
        bgColor: styleObj.bgColor.default[index.value],
        borderColor: styleObj.borderColor.default[index.value]
    }

    /* hover */
    let _hover = {
        color: styleObj.color.hover[index.value],
        bgColor: styleObj.bgColor.hover[index.value],
        borderColor: styleObj.borderColor.hover[index.value]
    }

    return { _default, _hover }
}

// 初始化默认样式
function InitDefaultStyles() {
    let { _default, _hover } = GetColorConfig()

    // 默认样式
    _default_styles.default = {
        color: _default.color,
        bgColor: _default.bgColor,
        borderColor: _default.borderColor
    }

    // hover 样式
    _default_styles.hover = {
        color: _hover.color,
        bgColor: _hover.bgColor,
        borderColor: _hover.borderColor
    }
}

// disabled
function GetDisabled() {
    /* 默认 */
    let _default = {
        color: _disabled.value.color[index.value],
        bgColor: _disabled.value.bgColor[index.value],
        borderColor: _disabled.value.borderColor[index.value],
    }

    return { _default }
}

const _disabled_style = computed(() => {
    let { _default } = GetDisabled()
    let { color, bgColor, borderColor } = _default
    return { color, bgColor, borderColor }
})

// plain
function GetPlain() {
    /* 默认 */
    let _default = {
        color: _plain.color.default[index.value],
        bgColor: _plain.bgColor.default[index.value],
        borderColor: _plain.borderColor.default[index.value],
    }
    let _hover = {
        color: _plain.color.hover[index.value],
        bgColor: _plain.bgColor.hover[index.value],
        borderColor: _plain.borderColor.hover[index.value],
    }
    return {
        _default, _hover
    }
}

const _plain_style = computed(() => {
    let { _default, _hover } = GetPlain()
    return { _default, _hover }
})

const click = (onClick: any) => {
    // onClick 为父级监听的 click
    !props.disabled && onClick && onClick()
}

onMounted(() => {
    InitDefaultStyles()
})

</script>

<style lang="scss" scoped>
/* 正常 */
$f-button-color: v-bind("_default_styles.default.color");
$f-button-bg-color: v-bind("_default_styles.default.bgColor");
$f-button-border-color: v-bind("_default_styles.default.borderColor");

/* hover 激活 */
$f-button-hover-color: v-bind("_default_styles.hover.color");
$f-button-hover-bg-color: v-bind("_default_styles.hover.bgColor");
$f-button-hover-border-color: v-bind("_default_styles.hover.borderColor");

.f-button {
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
    cursor: pointer;
    color: $f-button-color;
    background-color: $f-button-bg-color;
    border-radius: 4px;
    border: 1px solid $f-button-border-color;

    // .f-button == & ，一个按钮紧跟着的按钮 单个不生效 第二个起生效
    &+& {
        margin-left: 12px;
    }

    &:hover {
        color: $f-button-hover-color;
        background-color: $f-button-hover-bg-color;
        border-color: $f-button-hover-border-color;
    }

    /* plain */
    &.is-plain {
        color: v-bind("_plain_style._default.color");
        background-color: v-bind("_plain_style._default.bgColor");
        border-color: v-bind("_plain_style._default.borderColor");

        &:hover {
            color: v-bind("_plain_style._hover.color");
            background-color: v-bind("_plain_style._hover.bgColor");
            border-color: v-bind("_plain_style._hover.borderColor");
        }
    }

    /* round  */
    &.is-round {
        border-radius: 15px;
    }

    /* 禁用 */
    &.is-disabled {
        cursor: not-allowed;
        color: v-bind("_disabled_style.color");
        background-color: v-bind("_disabled_style.bgColor");
        border-color: v-bind("_disabled_style.borderColor");

        &:hover {
            color: v-bind("_disabled_style.color");
            background-color: v-bind("_disabled_style.bgColor");
            border-color: v-bind("_disabled_style.borderColor");
        }
    }
}
</style>